<template>
  <div class="tktk_container">
    <!--菜单表格-->
    <div class="tktk_btn"><el-button type="primary" size="mini" @click="handleAdd" icon="el-icon-plus">新增幻灯片</el-button>
    </div>
    <el-table v-loading="loading" :data="sliderList" row-key="menuId">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="广告名称" :show-overflow-tooltip="true" align="center"></el-table-column>
      <el-table-column label="广告图片" :show-overflow-tooltip="true" align="center">
        <template slot-scope="scope">
          <el-image style="height: 60px; border-radius: 5px;" :src="scope.row.advertisingUrl"
            :preview-src-list="[scope.row.advertisingUrl]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="advertisingName" label="跳转地址" :show-overflow-tooltip="true"
        align="center"></el-table-column>
      <el-table-column prop="sortNum" label="排序" :show-overflow-tooltip="true" align="center"></el-table-column>
      <el-table-column prop="status" label="是否隐藏" align="center">
        <template slot-scope="scope">
          <el-tag class="status_tag" v-if="scope.row.advertisingFlag == '0'" title="显示" type="success">显示</el-tag>
          <el-tag class="status_tag" v-else type="info" title="隐藏">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180" prop="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增编辑表格-->
    <el-drawer :title="title" :visible.sync="drawer" :direction="direction" :before-close="cancel" size="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
        <el-form-item label="广告名称" prop="name">
          <el-input v-model="form.name" placeholder="广告名称" maxlength="30" class="w260" />
        </el-form-item>
        <el-form-item label="广告图片" prop="advertisingUrl">
          <div class="upload-goods">
            <el-upload class="avatar-uploader" :action="actionUrl" :headers="headers" :on-success="changeUpdate"
              :show-file-list="false">
              <img v-if="form.advertisingUrl" :src="form.advertisingUrl" class="avatar_upload">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </div>
        </el-form-item>
        <el-form-item label="跳转类型" prop="advertisingType">
          <el-select v-model="form.advertisingType" placeholder="请选择跳转类型" class="w260">
            <el-option v-for="item in linkTypeOptions" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跳转地址" prop="advertisingAddr">
          <template v-if="form.advertisingType == '1'">
            <div class="goods-info">
              <el-tag type="info" v-if="form.advertisingAddr">{{ form.advertisingName }}</el-tag>
              <a @click="showGoods">请选择商品</a>
            </div>
          </template>
          <el-select v-else v-model="form.advertisingAddr" placeholder="请选择跳转地址" @change="changeAddress" class="w260">
            <el-option v-for="item in addressOptions" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sortNum">
          <el-input-number v-model="form.sortNum" :min="0" class="w260"></el-input-number>
        </el-form-item>
        <el-form-item prop="advertisingFlag" label="是否隐藏">
          <div class="radio-group">
            <label><input value="1" v-model="form.advertisingFlag" type="radio" name="status" />隐藏</label>
            <label><input value="0" v-model="form.advertisingFlag" type="radio" name="status" />显示</label>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>

      <el-drawer title="选择商品" :visible.sync="drawerBox" :direction="direction" :append-to-body="true"
        :before-close="cancelBox" size="80%">
        <select-goods @transfer="transfer"></select-goods>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
import selectGoods from '@/components/SelectGoods'
import { advertList, createAdvert, updateAdvert, deleteAdvert } from '@/api/tktk/advert'
export default {
  name: 'slider',
  components: { selectGoods },
  data() {
    return {
      actionUrl: '/api/cargo/file/upload',
      headers: {
        Authorization: this.$store.getters.token
      },
      loading: false,
      drawer: false,
      drawerBox: false,
      dialogVisible: false,
      title: '新增广告',
      direction: 'rtl',
      sliderList: [],
      searchForm: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      linkTypeOptions: [
        { id: 0, label: '菜单' },
        { id: 1, label: '商品详情' },
      ],
      addressOptions: [
        { label: '实时榜单', id: '1' },
        { label: '精选好货', id: '2' },
        { label: '超级爆品', id: '3' },
        { label: '全部商品', id: '4' },
        { label: '品牌优选', id: '5' }
      ],
      form: {
        name: '',
        advertisingAddr: '',
        advertisingName: '',
        advertisingUrl: '',
        sortNum: '0',
        advertisingFlag: '0',
        advertisingType: 1
      },
      rules: {
        name: [
          { required: true, message: '广告名称不能为空', trigger: 'blur' }
        ],
        advertisingAddr: [
          { required: true, message: '跳转地址不能为空', trigger: 'blur' }
        ],
        advertisingType: [
          { required: true, message: '跳转类型不能为空', trigger: 'blur' }
        ],
        advertisingUrl: [
          { required: true, message: '广告图片不能为空', trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: '顺序不能为空', trigger: 'blur' }
        ],
        delShow: [
          { required: true, message: '请选择是否隐藏', trigger: 'blur' }
        ]
      }
    }
  },

  watch: {
    'form.advertisingType'(val) {
      this.form.advertisingAddr = ''
      this.form.advertisingName = ''
    }
  },

  methods: {
    handleUpdate(row) {
      const { id, name, advertisingAddr, advertisingName, advertisingUrl, sortNum, advertisingFlag, advertisingType } = row
      this.drawer = true
      this.title = '编辑广告'
      this.form.id = id
      this.form.name = name
      this.form.advertisingFlag = advertisingFlag
      this.form.advertisingType = advertisingType
      this.form.advertisingAddr = advertisingAddr
      this.form.advertisingName = advertisingName
      this.form.advertisingUrl = advertisingUrl
      this.form.sortNum = sortNum
    },
    handleAdd() {
      this.resetForm()
      this.drawer = true
    },
    handleDelete(row) {
      const _this = this
      this.$confirm('确定要删除该广告吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAdvert({ id: row.id }).then(res => {
          if (res.code === 200) {
            _this.$message.success('删除成功')
            _this.getAdvertshow()
          } else {
            _this.$message.error(res.msg)
          }
        })
      })
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.form.id) {
            // 编辑
            updateAdvert(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.drawer = false
                this.getAdvertshow()
                this.resetForm()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // 新增
            createAdvert(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.drawer = false
                this.getAdvertshow()
                this.resetForm()
              } else {
                this.$message.error(res.msg)
              }
            })
          }

        }
      })
    },
    resetForm() {
      this.form = {
        name: '',
        advertisingAddr: '',
        advertisingName: '',
        advertisingUrl: '',
        sortNum: '0',
        advertisingFlag: '1',
        advertisingType: ''
      }
    },
    showGoods() {
      this.drawerBox = true
    },
    cancel() {
      this.drawer = false
    },
    cancelBox() {
      this.drawerBox = false
    },

    changeAddress(value) {
      this.form.advertisingAddr = value
      this.addressOptions.map(item => {
        if (item.id == value) {
          this.form.advertisingName = item.label
        }
      })
    },

    changeUpdate(file, fileList) {
      if (file.code == 200) {
        this.form.advertisingUrl = file.url
      } else {
        this.form.advertisingUrl = ''
        this.$message.error(file.msg)
      }
    },

    transfer(data) {
      const { id, name } = data
      this.form.advertisingAddr = id
      this.form.advertisingName = name
      this.drawerBox = false
    },

    getAdvertshow() {
      advertList(this.searchForm).then(res => {
        if (res.code == 200) {
          this.sliderList = res.rows || []
        }
      })
    }
  },

  mounted() {
    this.getAdvertshow()
  }
}
</script>

<style lang="scss">
.upload-goods {
  .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 78px;

    i {
      font-size: 20px;
    }
  }

  .el-upload-list__item {
    width: 80px;
    height: 80px;
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }
}

.goods-info {
  display: flex;
  align-items: center;

  a {
    font-size: 12px;
    cursor: pointer;
    color: #1890ff;
    margin-left: 20px;
  }
}

.avatar_upload {
  max-height: 100px;
  border-radius: 5px;
}
</style>
